<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <title>分享</title>
    <link type="text/css" rel="stylesheet" href="{{ asset('css/reset.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
    <link type="text/css" rel="stylesheet" href="{{ asset('css/share.css') }}">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
    <script type="text/javascript">
        document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 15 + 'px';
    </script>
</head>
<body>
<section>
    <!--按钮-->
    <a class="button">下载APP，体验更多功能</a>
    <!--轮播-->
    <div class="swiper-container">
        <div class="parallax-bg" data-swiper-parallax="-10%">
            <div class="background">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="triangle"></div>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="images">
                    <div class="pic"></div>
                </div>
                <h5>病友论坛适时互动</h5>
                <p>病友沟通零距离，发帖还可以赚零钱</p>
            </div>
            <div class="swiper-slide">
                <div class="images">
                    <div class="pic"></div>
                </div>
                <h5>发现模块</h5>
                <p>基于当前位置，提供周边的医药、导诊服务</p>
            </div>
            <div class="swiper-slide">
                <div class="images">
                    <div class="pic"></div>
                </div>
                <h5>在线商城</h5>
                <p>品牌药企直供 健康生活一站购</p>
            </div>
            <div class="swiper-slide">
                <div class="images">
                    <div class="pic"></div>
                </div>
                <h5>积分商城</h5>
                <p>红包、实用好礼换不停</p>
            </div>
        </div>
    </div>
</section>
</body>
<script>
    $(function () {
        var swiper = new Swiper('.swiper-container', {
            followFinger: false,
            speed: 500,
            autoplay: {
                delay: 1800,
                disableOnInteraction: false
            },
            parallax: true,
            on: {
                init: function (swiper) {
                    slide = this.slides.eq(0);
                    slide.addClass('ani-slide');
                },
                transitionStart: function () {
                    for (i = 0; i < this.slides.length; i++) {
                        slide = this.slides.eq(i);
                        slide.removeClass('ani-slide');
                    }
                },
                transitionEnd: function () {
                    slide = this.slides.eq(this.activeIndex);
                    slide.addClass('ani-slide');
                }
            }
        });
    });
</script>
</html>
